<template>
  <el-container>
    <el-header style="height:80px;">
      <Header></Header>
    </el-header>
    <el-container>
      <el-aside style="width:200px;">
        <Aside>
        </Aside>
      </el-aside>
      <el-container style="overflow: hidden">
        <el-main>
          <router-view></router-view>
        </el-main>
        <el-footer><Footer></Footer></el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>
<script>
import  Aside from '@/components/Aside'
import  Header from '@/components/Header'
import  Footer from '@/components/Footer'
export  default {
  data(){
    return{

    }

  },
components:{
  Aside,Header,Footer
}

}
</script>
<style scoped>
.el-container {
  height: 100%;
  overflow: auto;
}

.el-header{
  width: 100%;
  height: 80px;
  border: 1px solid #ccc;
  border-top:none;
  border-right:none ;
  color: #333;
  background: #2980B9;
  background: -webkit-linear-gradient(to top, #66b1ff, #6DD5FA, #FFFFFF);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to top, #66b1ff, #6DD5FA, #FFFFFF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


}
.el-footer {
  border-top: 1px solid #ccc;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  border: 1px solid #ccc;
  border-top:none;
  border-bottom: none;
  color: #333;
  line-height: 200px;
  overflow: hidden;
}

.el-main {
  color: #333;
}


</style>
